<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/index.js'

// 响应式数据
const showUsername = ref(false)
const username = ref("")
const showPhone = ref(false)

// 路由和状态管理
const router = useRouter()
const store = useUserStore()

// 获取用户数据
const userData = computed(() => store.userData)

// 计算属性
const name = computed(() => {
  return userData.value.userName
    ? userData.value.userName[0] +
    "*".repeat(Math.max(userData.value.userName.length - 1, 0))
    : "";
})

const phone = computed(() => {
  return userData.value.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
})

// 方法定义
const onClickLeft = () => {
  router.back()
}

const goAddress = () => {
  router.push({
    path: "/address",
  })
}
</script>
<template>
  <div class="setting_wrapper">
    <van-nav-bar title="设置" class="nav_bar" fixed @click-left="onClickLeft" />
    <div class="container">
      <div class="avatar">
        <van-image class="icon" round :src="userData.avatar" />
      </div>
      <div class="form">
        <van-cell-group>
          <van-cell>
            <template #title>
              <span class="cell_title">昵称：{{ name }}</span>
            </template>
          </van-cell>
          <van-cell>
            <template #title>
              <span class="cell_title">手机号：{{ phone }}</span>
            </template>
          </van-cell>
          <van-cell is-link @click="goAddress">
            <template #title>
              <span class="cell_title">我的收货地址</span>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
    <van-action-sheet v-model:show="showUsername" title="修改昵称" :closeable="false" get-container=".setting_wrapper">
      <div class="username_box">
        <van-field v-model="username" placeholder="新昵称" />
        <div class="btn">提交</div>
      </div>
    </van-action-sheet>
    <van-action-sheet v-model:show="showPhone" title="修改手机号码" :closeable="false" get-container=".setting_wrapper">
      <div class="username_box">
        <van-field v-model="username" placeholder="新手机号" />
        <div class="btn">提交</div>
      </div>
    </van-action-sheet>
  </div>
</template>



<style lang="less" scoped>
.setting_wrapper {
  height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  box-sizing: border-box;
  padding: 200px 50px 150px 50px;

  :deep(.van-nav-bar__content) {
    height: 100px;
    margin: 25px auto;
  }

  :deep(.van-nav-bar__title) {
    font-size: 54px;
    font-weight: 500;
  }

  :deep(.van-ellipsis) {
    overflow: initial;
  }

  .container {
    padding: 50px 30px;
    background: #fff;
    border-radius: 20px;
  }

  .avatar {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;

    .icon {
      width: 225px;
      height: 225px;
    }

    .avatar_tips {
      font-size: 38px;
      color: #919191;
      margin-top: 20px;
    }
  }

  .form {
    margin-top: 60px;

    .cell_title {
      font-size: 42px;
      color: #333333;
    }
  }

  .nav_bar {
    :deep(.van-icon) {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }
  }

  .username_box {
    min-height: 100vh;
    background: #fff;
    padding: 100px 50px;
    text-align: center;

    :deep(.van-cell) {
      background: #eee;
    }

    .btn {
      display: inline-block;
      margin-top: 100px;
      padding: 25px 240px;
      background: #058efb;
      color: #fff;
      font-size: 44px;
      text-align: center;
      border-radius: 999px;
      font-weight: bold;
    }
  }
}

:deep(.van-cell) {
  padding: 60px 50px;
}

:deep(.van-cell__right-icon) {
  font-size: 50px;
}
</style>
